<?php slot('index','cur'); ?>
<!--banner-->
<div class="wrap-main left">
    <div class="wrap-banner">
    	<img src="<?php echo image_path('skill/img-1.png'); ?>" />
    </div>
</div>
  
<!--主体-->
<div class="wrap-main left">
	<div class="menu-tab">
    	<ul class="menu-li left">
            <li <?php if($sf_request->getParameter('type',20) == 20): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=20'); ?>">推荐</a></li>
            <?php if($sf_user->isAuthenticated()): ?>
            <li <?php if($sf_request->getParameter('type',20) == 99): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=99'); ?>">订阅</a></li>
            <?php endif; ?>
            <li <?php if($sf_request->getParameter('type',20) == 1): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=1'); ?>">玩具</a></li>
            <li <?php if($sf_request->getParameter('type',20) == 2): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=2'); ?>">游戏</a></li>
            <li <?php if($sf_request->getParameter('type',20) == 3): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=3'); ?>">绘本</a></li>
            <li <?php if($sf_request->getParameter('type',20) == 7): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=7'); ?>">音乐</a></li>
            <li <?php if($sf_request->getParameter('type',20) == 4): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=4'); ?>">绘本</a></li>
            <li <?php if($sf_request->getParameter('type',20) == 9): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=9'); ?>">用品</a></li>
            <li <?php if($sf_request->getParameter('type',20) == 10): ?>class="cur"<?php endif; ?>><a href="<?php echo url_for('skill/index?type=10'); ?>">亲子游</a></li>
        </ul>
        <a class="addnews right" href="<?php echo url_for('skill/add'); ?>">发布新发现</a>
    </div>
</div>
<div class="wrap-main left">
<div class="inwrap">
    <div id="main" role="main">
        <ul id="tiles">
        	<!-- 这里显示获取的内容 -->
        </ul>
        
        <div id="loader">
        	<div id="loaderCircle"></div>
        </div>
        
        <div class="loadermore" id="loadm"><div><img src="<?php echo image_path('skill/icon-8.png'); ?>"><span style="padding-left:20px;">加载更多发现……</span></div></div>
        <div class="loadermore" id="loadn"><div>
                <!--<img src="<?php // echo image_path('skill/icon-8.png'); ?>"><span style="padding-left:20px;">全部加载完毕。</span></div>-->
        </div>
    </div>
</div>
</div>

<script>
(function ($) {
  var $tiles = $('#tiles'),
    $handler = $('li', $tiles),
    page = 1,
    isLoading = false,
    apiURL = '<?php echo url_for('skill/index_page'); ?>', //请求的地址
    lastRequestTimestamp = 0,
    fadeInDelay = 2000,
    $window = $(window),
    $document = $(document);

  //准备布局选项。
  var options = {
    autoResize: false, // 是否在浏览器窗口大小变化时进行重新布局。
    container: $('#tiles'), // 可选，额外的CSS样式
    offset: 12, // 可选，网格的距离
    itemWidth: 298, // 可选，网格的宽度
    align: 'left'
  };

  /**
   * 当滚动到底部时，添加更多的内容。
   */
  function onScroll(event){
    if (!isLoading) {
      var closeToBottom = ($window.scrollTop() + $window.height() > $document.height() - 100);
      if (closeToBottom) {
        var currentTime = new Date().getTime();
        if (lastRequestTimestamp < currentTime - 1000) {
          lastRequestTimestamp = currentTime;
          loadData();
        }
      }
    }
  };

  /**
   * 刷新布局
   */
  function applyLayout($newImages){
    options.container.imagesLoaded(function(){
      // 销毁旧的处理程序
      if ($handler.wookmarkInstance) {
        $handler.wookmarkInstance.clear();
      }

      // 创建一个新的布局处理程序
      $tiles.append($newImages);
      $handler = $('li', $tiles);
      $handler.wookmark(options);

      // 设置每个图片的不透明度
      $newImages.each(function(){
        var $self = $(this);
        window.setTimeout(function(){
          $self.css('opacity', 1);
        }, Math.random() * fadeInDelay);
      });
    });
  };

  /**
   * 加载数据
   */
  function loadData(){
    isLoading = true;
    $('#loaderCircle').show();

    $.ajax({
      url: apiURL,
      dataType: 'json', // 设置为JSON数据
      data: {page: page,type: <?php echo $sf_request->getParameter('type',20); ?>}, // 分页参数，以确保加载新的数据
      success: onLoadData
    });
  };

  /**
   * 从库中接收数据，创建HTML图像和更新布局
   */
  function onLoadData(response){
    isLoading = false;
    $('#loaderCircle').hide();

    // 増量页面索引
    page++;

    // 为图片创建HTML
    var html = '',
        data = response.data,
        i = 0, length = data.length, image, opacity,
        $newImages;

    for (; i < length; i++) {
      image = data[i];

      html += '<li>';
      html += '<a target="_blank" href="'+image.urlink+'" title="'+image.title+'">';
      //html += '<img src="'+image.preview+'" width="200" height="'+Math.round(image.height/image.width*200)+'">'; //瀑布流布局
	  html += '<img src="'+image.preview+'" width="200" height="200">';
      html += '</a>';
      html += '<p class="lititle"><a target="_blank" href="'+image.urlink+'" title="'+image.title+'">'+image.title+'</a></p>';
      html += '<p class="user-d"><i class="user-dpto"><img src="'+image.userpto+'"></i><a href="'+image.userlink+'"><i class="user-dna">'+image.userna+'</i></a><span><i class="collect">'+image.collectnum+'</i><i class="review">'+image.reviewnum+'</i></span></p>';
      html += '</li>';
    }

    $newImages = $(html);

    if (response.message == 'No more pictures') {
      $document.off('scroll', onScroll);
	  $('#loadm').hide();
	  $('#loadn').show();
    }else{
		$('#loadm').show();
	}

    applyLayout($newImages);
  };

  $document.on('scroll', onScroll);

  loadData();
})(jQuery);
</script>